<template>
  <div class="header">
    <div class="left-section">
      <menu-unfold-outlined
        v-if="collapsed"
        class="trigger"
        @click="() => (collapsed = !collapsed)"
      />
      <menu-fold-outlined
        v-else
        class="trigger"
        @click="() => (collapsed = !collapsed)"
      />
      <Breadcrumb></Breadcrumb>
    </div>
    <User class="user"></User>
  </div>
</template>

<script setup lang="ts">
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { useGlobalStore } from '@/store/modules/global';
import Breadcrumb from './Components/Breadcrumb.vue';
import User from './Components/User.vue';
import { ref, watch } from 'vue';
const globalStore = useGlobalStore();
const collapsed = ref<boolean>(false);

// 监听，折叠侧边栏
watch(collapsed, (newValue) => {
  globalStore.changecollapsed(newValue);
});
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
